<template>
  <div id="hh">
        <template v-for="ib in o">
      <div class="left" :key="ib.id">
        <img :src="ib.path" alt="">
      </div>
    </template>
    <template v-for="item in listb">
      <div class="right" :key="item.name">
           <h3>{{item.name}}</h3>
           <p>{{item.desc}}</p>
           <p>价格：{{item.price}}</p>
           <p>库存：{{item.stock_num}}</p>
           <div class="inp">数量：<input type="number" value="1"></div>
           <button @click="shop(item.id)">立即购买</button>
           <button @click="join">加入购物车</button>
      </div>
    </template>

</div>
</template>

<script>
import { message } from 'ant-design-vue';
export default {
//        mounted(){
//       this._axios.get("/api/classify/392").then((res)=>{
//       this.list=res.data.result.rows
// } }
data:()=>{
  return{
    listb:[],
    o:[]
  }
},
mounted(){
  this._axios.get(`/api/goods/${this.$route.query.id}`).then((res)=>{
    this.listb=res.data
    console.log(this.listb);
     this.o=res.data.result.s_goods_photos
    console.log(this.o);
  })

},
methods:{
  join(){
    message.success("加入购物车成功")
    this._axios.post(`/api/shoppingCart`,{
      goods_id:this.$route.query.id,
      num:1
    })
  },
  shop(id){
    this.$router.push({path:"/shopping",query:{id}})
  }
}
}
</script>

<style lang="scss" scoped>
#hh{
  width: 800px;
  margin: 0 auto;
  height: 400px;
  position: relative;
  background-color: skyblue;
  padding: 20px;
  .left{
    position: absolute;
    left: 100px;
   text-align: right;
   top: 100px;
  img{
    width: 250px;
  }
  }
  .right{
    width: 380px;
    background-color: #fff;
    padding: 10px;
    top: 100px;
   position: absolute;
   left: 400px;
   &:nth-last-of-type(2){
     display: none;
   }
   .inp{
     input{
       width: 80px;
     }
   }
   button{
     margin-top: 20px;
     width: 100px;
     height: 50px;
     margin-right: 20px;
     border: none;
     background-color: skyblue;
     border-radius: 20px ;
   }
  }
}

</style>